<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瀑布流试布局</title>
  <style>
    .container {
      display: flex;
      flex-flow: column wrap;
      align-content: space-between;
      /* 容器必须有固定高度
      * 且高度大于最高的列高 */
      height: 660px;
      background-color: #f7f7f7;
      border-radius: 3px;
      padding: 20px;
      width: 60%;
      margin: 40px auto;
      counter-reset: items;
    }
    .item {
      width: 32%;
      position: relative;
      margin-bottom: 2%;
      border-radius: 3px;
      background-color: #a1cbfa;
      border: 1px solid #4290e2;
      box-shadow: 0 2px 2px rgba(0,90,250,0.05),
        0 4px 4px rgba(0,90,250,0.05),
        0 8px 8px rgba(0,90,250,0.05),
        0 16px 16px rgba(0,90,250,0.05);
      color: #fff;
      padding: 15px;
      box-sizing: border-box;
    }
    /* 仅用于打印数字 */
   
    /* 重新定义内容块排序优先级，让其横向排序 */
    .item:nth-child(3n+1) { order: 1; }
    .item:nth-child(3n+2) { order: 2; }
    .item:nth-child(3n)   { order: 3; }
    /* 强制使内容块分列的隐藏列 */
    .container::before,
    .container::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }
     /* .item::before {
      counter-increment: items;
      content: counter(items);
    } */
  </style>
</head>
<body>

  <div class="container">
    <div class="item" style="height: 140px">   1</div>
    <div class="item" style="height: 140px">   2</div>
    <div class="item" style="height: 140px">  3</div>
    <div class="item" style="height: 140px">  4</div>
    <div class="item" style="height: 140px">  5</div>
  </div>
  
</body>
</html>